<template>
  <PageWrapper title="房屋详情">
    <Description
      v-for="reg in registers"
      :key="reg.regId"
      @register="reg.reg"
      class="mt-4"
      :labelStyle="{ width: '30em' }"
    />
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, h, watch, unref, reactive, toRefs } from 'vue';
  import { Description, DescItem, useDescription } from '/@/components/Description/index';
  import { PageWrapper } from '/@/components/Page';
  import { useRoute } from 'vue-router';
  import { detailLastCheckApi } from '/@/api/demo/table';
  import { FullSrcPic } from '/@/components/FullSrcPic/index';
  import HouseMngMap from '/@/views/houseMng/HouseMap.vue';
  import { Col, Row } from 'ant-design-vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  const { info, success, warning, error } = createMessage;
  import { propTypes } from '/@/utils/propTypes';
  import type { DescRegister } from '/@/views/sampling/task/houseChk/typing';

  export default defineComponent({
    components: { Description, PageWrapper, HouseMngMap, Col, Row },
    props: {
      pid: propTypes.string,
      checkForms: propTypes.object,
      hid: propTypes.string,
    },
    setup(props) {
      const route = useRoute();
      const houseInfo = ref<Recordable>({});

      const oid = route.params?.id ?? props.pid;
      const { checkForms } = toRefs(props);
      const hid = route.query?.hid ?? props.hid;

      const houseName = computed(() => houseInfo.value['fwbh']);
      const houseMngRef = ref();
      const registers = ref<DescRegister[]>([]);
      if (checkForms && checkForms.value) {
        checkForms.value.form.forEach((element) => {
          const formDetailColumns: DescItem[] = [];
          const detailInfo = {};
          element.data.forEach((element2) => {
            detailInfo[element2.key] = element2.value;
            if (element2.isPhoto) {
              formDetailColumns.push({
                label: element2.alias,
                field: element2.key,
                render: (curVal, data) => {
                  return h(FullSrcPic, {
                    boolVal: true,
                    picList: element2.photosValue,
                  });
                },
              });
            } else {
              formDetailColumns.push({
                label: element2.alias,
                field: element2.key,
              });
            }
          });
          const [register] = useDescription({
            title: element.group,
            data: detailInfo,
            schema: formDetailColumns,
            column: 1,
            collapseOptions: { canExpand: true, helpMessage: oid },
          });

          registers.value.push({
            regId: element.group,
            reg: register,
          });
        });
      }

      function locMap() {
        houseMngRef.value.locMap(hid);
      }

      return { registers, oid, houseName, houseMngRef, locMap };
    },
  });
</script>
